<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";
	import dayjs from "dayjs"

	const db = uniCloud.database();

	let id;
	const detail = ref();

	// 获取list传来的_id
	onLoad((e) => {
		console.log(e);
		id = e.id;
		getDetail();
	})
	// 获取数据
	const getDetail = async () => {
		let res = await db.collection("demo-user").doc(id).get({
			getOne: true
		});
		console.log(res.result.data);
		detail.value = res.result.data;
	}
	// 删除
	const handleRemove = async () => {
		uni.showModal({
			title: "是否确认删除",
			success: async res => {
				if (res.confirm) {
					let res = await db.collection("demo-user").doc(id).remove();
					uni.showToast({
						title: "删除成功",
						icon: "none"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			}
		})

	}
	// 跳转到更新页面
	const goUpdate = (e) => {
		uni.navigateTo({
			url: "/pages/demo1/update?id=" + e
		})
	}

	getDetail()
</script>
<template>
	<view class="detail" v-if="detail">
		<view class="content">
			<view>姓名：<text class="big">{{detail.name}}</text></view>
			<view>年龄：<text class="big">{{detail.age}}</text></view>
			<view>性别：<text class="big">{{detail.gender}}</text></view>
			<view>日期：<text class="big">{{dayjs(detail.createTime).format("YYYY-MM-DD HH:mm:ss")}}</text></view>
		</view>

		<view class="group">
			<button type="primary" @click="goUpdate(detail._id)">修改</button>
			<button type="warn" @click="handleRemove">删除</button>
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.detail {
		padding: 30rpx;

		.content {
			font-size: 30rpx;

			.big {
				font-size: 34rpx;
				font-weight: bolder;
			}
		}

		.group {
			margin-top: 30rpx;
			display: flex;
			gap: 30rpx;

			button {
				width: 100%;
			}
		}

	}
</style>